<template>
  <div class="login">
    <div class="login_title">古德温救我-把足球当理财</div>
    <div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
              v-model="username"
              name="用户名"
              label=""
              @input="usernameChange"
              placeholder="请输入账号（长度8-12位数字+字母）"
              maxlength="12"
              :rules="[{ required: true, message: '长度8-12位数字+字母' ,pattern:/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,12}$/ }]"
          />
          <van-field
              v-model="password"
              type="password"
              name="密码"
              label=""
              maxlength="6"
              placeholder="请输入密码（6位数字密码）"
              :rules="[{ required: true, message: '请填写密码',pattern: /^\d{6}$/ }]"
          />
        </van-cell-group>
        <div style="user-select: none;padding: 18px">
          <selectView v-model:value="isPassing.type" :jiazai="true"></selectView>

        </div>
        <div class="tips">请牢记账号密码，丢失不可找回只能重新注册</div>
        <div style="margin: 16px;" class="login_btn">

          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
          <div class="register">没有账号？请点这里 <span @click="toRegister" style="color: #fff">>>注册<<</span></div>
          <div class="information">
            <svg-icon style="width: 1.2em;height: 1.2em;margin-right: 2px;" name="fromRz" /> 个人信息将被多层加密安全处理</div>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import dragVerify from '@/components/selectView/index.vue'
import {useRouter} from "vue-router";
import {UserEnroll, UserLogin} from "@/api/mock";
import { ComponentInternalInstance, getCurrentInstance,onMounted,nextTick } from 'vue';
import {storage} from "@/utils/unit"

import { ref,reactive } from 'vue';
import {showFailToast, showSuccessToast} from "vant";
const { proxy } =  getCurrentInstance() as ComponentInternalInstance
const router = useRouter()
const usernameChange = ()=>{
  username.value= username.value.toLowerCase()
}
onMounted(() => {
  nextTick(()=>{
    if (location.href.indexOf("#reloaded") == -1) {
      setTimeout(()=>{
        location.replace(location.href + '#reloaded')
      },800)

    }
  })

})
// onMounted
const userLogin = ()=>{
  // UserLogin
  if(!isPassing.type){
    showFailToast('请拖动滑块验证');
    return;

  }
  username.value= username.value.toLowerCase()
  let pa = {
    name:username.value,
    password:password.value
  }
  UserLogin(pa).then(
      (res) => {
        if (+res.code === 200){
          storage.set('sToken',res.data.token)
          showSuccessToast(res.msg);
          localStorage.setItem("token",res.data.id);
          localStorage.setItem("is_vip",res.data.is_vip);
          localStorage.setItem("wy_token",res.data.wy_accid);
          localStorage.setItem("wy_accid",res.data.wy_accid);
          localStorage.setItem("name",res.data.name);
          // proxy.$token=res.data.id
          proxy.$sayToken(res.data.id)
          proxy.$sayIs_vip(res.data.is_vip)
          proxy.$sayIs_yx(res.data.wy_token,res.data.wy_accid,res.data.name)

          router.push({
            path: "/index",
            query: {
              mode: "",
            },
          });

          // toLogin()
        }else{
          showFailToast(res.msg);

        }

      },
      err => {
        console.log(err);
        // showFailToast("请求有误");
      }
  );
}
const toRegister = ()=>{
  // show.value = false
  router.push({
    path: "/register",
    query: {
      mode: "",
    },
  });
}
    let isPassing = reactive({
      type:false
    });
    // const isPassing = false;
    const username = ref('');
    const password = ref('');
    const onSubmit = (values) => {
      userLogin()
      console.log('submit', values);
    };
    const isPassingtrue = ()=>{
      isPassing.value = true
      // isPassing = true
      // isPassing.value = true
    }
    const handlePass = ()=>{
      // isPassing.value = true
    }


</script>

<style scoped lang="less">
.tips{
  font-weight:500;
  font-size: 12px;
  color: #fff;
  text-align: center;
}
.register,.information{
  color:#B9B9B9;
  font-size: 12px;
  text-align: center;
}
.information{
  //background-color: #B9B9B9;
  background-color: #373737;
  display:flex;
  justify-content: center;
  align-items: center;
  //height:30px;
  border-radius:30px;
  line-height: 30px;

}
.register{
  line-height:46px;
}
::v-deep .van-field__control{
  color: #fff;
}
::v-deep .van-cell:after{
  display:none;
}
::v-deep .van-cell{
  min-height: 50px;
  line-height: 30px;
  background-color: #373737;
  border-radius: 6px;
  color:#fff;
}
::v-deep .van-cell-group .van-cell:not(:first-child){
  margin-top: 20px;

}
::v-deep .van-cell-group{
  background-color: rgb(40,40,40);
  //background-color: #373737;
  //margin-top: 20px;
}
.login{
  .login_title{
    font-size: 16px;
    color: #fff;
    line-height: 44px;
    text-align: center;
  }

}
.login_btn{
  padding:0 50px;
  height: 50px;
  .van-button--primary{
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 600;
    border:0;
  }
  .van-button{
    background-color: #1A674E;
    border-radius: 8px;
  }
}

</style>
